<template>
  <div class="container">
    <div class="carousel-container">
      <el-carousel :interval="4000" type="card" height="450px">
        <el-carousel-item v-for="item in this.menuList.data" :key="item.id">
          <div class="carousel-image-container">
            <img :src="item.imgUrl" class="carousel-image" />
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    
    <transition name="fade" appear>
      <div class="welcome-section">
        <h1 class="welcome-title">欢迎使用ULTRA购物系统</h1>
        <p class="welcome-text">
          ULTRA购物系统是由科泰集团开发的一套购物系统，旨在为广大消费者提供便捷、高效、安全的购物体验。
          ULTRA购物系统采用前沿的技术，采用云计算、大数据、人工智能等新型技术，为消费者提供全新的购物体验，
          帮助消费者享受购物的乐趣，实现消费者的全方位需求，提升消费者的购物能力。
        </p>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "IndexComponent",
  data() {
    return {
      menuList: {
        data: [],
      },
    };
  },
  mounted() {
    this.handleClick();
  },
  methods: {
    async handleClick() {
      const res = await this.$axios("/api/banner/list");
      if (res.data.code === 200) {
        this.menuList.data = res.data.data.data;
      }
    },
  },
};
</script>

<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.carousel-container {
  margin: 40px auto;
  text-align: center;
}

.carousel-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.carousel-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.welcome-section {
  margin: 60px auto;
  text-align: center;
  max-width: 800px;
}

.welcome-title {
  color: #409EFF;
  font-size: 28px;
  margin-bottom: 20px;
}

.welcome-text {
  font-size: 16px;
  line-height: 1.8;
  color: #606266;
}

/* 动画效果 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 1s, transform 1s;
}
.fade-enter-from {
  opacity: 0;
  transform: translateY(20px);
}
.fade-enter-to {
  opacity: 1;
  transform: translateY(0);
}
</style>
